import React, { useState } from 'react'
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    DatePicker,
    Selector,
    Slider,
    Stepper,
    Switch,
} from 'antd-mobile'
import http from '../../api/axiosapi'
import { useNavigate } from 'react-router-dom'
function Index() {
    let navget = useNavigate()
    const onFinish = async (values) => {
        // const res = await http.post('/api/login', values)
        // console.log(res);
        navget('/')
    }

    const [code, setcode] = useState('')
    const [time, settime] = useState(5)
    const djsj = () => {
        let tt = setInterval(() => {
            settime(par => {
                if (par === 0) {
                    setcode(Math.random().toString().slice(2, 6))
                    clearInterval(tt)
                    return 5
                }
                return par - 1
            })
        }, 1000)
    }
    return (
        <div>
            <Form
                onFinish={onFinish}
                layout='horizontal'
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <Form.Header>水平布局表单</Form.Header>
                <Form.Item
                    name='username'
                    label='用户名'
                    rules={[{ required: true, message: '用户名不能为空' }]}
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>
                <Form.Item
                    name='password'
                    label='密码'
                    rules={[{ required: true, message: '密码不能为空' }]}
                >
                    <Input placeholder='请输入密码' />
                </Form.Item>
                <Form.Item label='短信验证码' extra={<Button onClick={() => djsj()}>{`${time}重新获取`}</Button>}>
                    <Input placeholder='请输入' value={code} />
                </Form.Item>
                

            </Form>
        </div>
    )
}

export default Index
